<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .bg-image {
            /* The image used */
            background-image: url("../static/img/我心危9.jpg");

            /* Add the blur effect */
            filter: blur(8px);
            -webkit-filter: blur(8px);

            /* Full height */
            height: 100%;

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Position text in the center of the page/image */
        .bg-text {
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
            color: white;
            font-weight: bold;
            border: 3px solid #f1f1f1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 80%;
            padding: 20px;
            text-align: center;
        }

        /* Style for the email link */
        .email-link {
            color: #4CAF50; /* Green color */
            text-decoration: none; /* Remove underline */
        }

        /* :hover effect for the email link */
        .email-link:hover {
            color: #ff9800; /* Orange color */
        }

        /* Animation for the glowing effect */
        .email-link:hover .email-tag {
            animation: glow 1s infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 10px #ff9800, 0 0 20px #ff9800, 0 0 30px #ff9800, 0 0 40px #ff9800, 0 0 50px #ff9800, 0 0 60px #ff9800, 0 0 70px #ff9800, 0 0 80px #ff9800, 0 0 90px #ff9800;
            }
            to {
                text-shadow: 0 0 20px #ff9800, 0 0 30px #ff9800, 0 0 40px #ff9800, 0 0 50px #ff9800, 0 0 60px #ff9800, 0 0 70px #ff9800, 0 0 80px #ff9800, 0 0 90px #ff9800, 0 0 100px #ff9800;
            }
        }
    </style>
</head>
<body>

<div class="bg-image"></div>

<div class="bg-text">
    <h2>联系我们</h2>
    <a href="mailto:3217969624@qq.com" class="email-link">Email: 3217969624@qq.com</a>
</div>

</body>
</html>
